<div class="panel panel-default-custom" ng-class="{'disable-clicks':selectedOrgUnit.closedStatus}" ng-controller="RelationshipController">
    <div class="panel-heading handle bold">
        {{relationshipsWidget.title| translate}}
        <span class="nav-pills" ng-if="selectedTei && selectedProgram.relationshipText  && !selectedTei.inactive && selectedProgram.access.data.write">
            | <a href ng-click="showAddRelationship(true)" ng-attr-title="{{'add_relationship'| translate}}"><span ng-class="{true: 'widget-link-active', false: 'widget-link'} [showAddRelationshipDiv]">{{selectedProgram.relationshipText}}</span></a>
        </span>        
        
        <span class="nav-pills" ng-if="selectedTei  && !selectedTei.inactive && selectedProgram.access.data.write">
            | <a href ng-click="showAddRelationship(false)" ng-attr-title="{{'add_relationship'| translate}}"><span ng-class="{true: 'widget-link-active', false: 'widget-link'} [showAddRelationshipDiv]">{{'add' | translate}}</span></a>
        </span>
        
        <span class="pull-right widget-link">
            <a class="small-horizontal-spacing" href ng-click="expandCollapse(relationshipsWidget)">
                <span ng-show="relationshipsWidget.expand"><i class="fa fa-chevron-up" ng-attr-title="{{collapseLabel}}"></i></span>
                <span ng-show="!relationshipsWidget.expand"><i class="fa fa-chevron-down" ng-attr-title="{{expandLabel}}"></i></span>
            </a>
            <a ng-show="userAuthority.canAdministerDashboard || !lockedList[selectedProgram.id]" class="small-horizontal-spacing" href ng-click="removeWidget(relationshipsWidget)" ng-attr-title="{{removeLabel}}"><i class="fa fa-times-circle"></i></a>            
        </span>        
    </div>
    <div ng-show="relationshipsWidget.expand" class="panel-body dashboard-widget-container">
        <div>
            <div ng-show="selectedTei && !selectedTei.relationships || selectedTei.relationships.length < 1 || (relatedTeis.length < 1 && relatedEvents.length < 1)" class="alert alert-warning">{{noRelationshipLabel}}</div>
            <div ng-show="!selectedTei" class="alert alert-danger">{{'relationship_not_possible'| translate}}</div> 
            <div ng-if="relatedTeis.length > 0">
                <table class="table table-striped dhis2-table-hover table-bordered">
                    <tr>
                        <th>
                            {{'relationship' | translate}}
                        </th>
                        <!-- ng-if checks if the displayInListNoProgram is true and if that spesific attribute shold be displayed for the current program. -->
                        <th ng-repeat="att in relationshipAttributes" ng-if="att.trackedEntityAttribute.displayInListNoProgram">
                            {{att.displayName}}
                        </th>
                        <th ng-if="!selectedTei.inactive && selectedProgram.access.data.write"></th>
                    </tr>
                    <tr ng-repeat="rel in relatedTeis">
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showDashboard(rel.trackedEntityInstance, rel.relationshipProgramConstraint.id)">{{rel.relName}}</td>
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showDashboard(rel.trackedEntityInstance, rel.relationshipProgramConstraint.id)" ng-repeat="att in relationshipAttributes" ng-if="att.trackedEntityAttribute.displayInListNoProgram">
                            {{rel.attributes[att.trackedEntityAttribute.id]}}
                        </td>
                        <td ng-click="removeRelationship(rel)" ng-attr-title="{{'delete_relationship'| translate}}" ng-if="!selectedTei.inactive && selectedProgram.access.data.write && rel.relationshipType.access.data.write">
                            <i class="fa fa-trash-o red"></i>
                        </td>
                        <td ng-if="!rel.relationshipType.access.data.write" ng-attr-title="{{'can_not_delete_relationship'| translate}}">
                            <i class="fa fa-trash-o grey"></i>
                        </td>
                    </tr>
                </table>           
            </div>
            <div ng-if="relatedEvents.length > 0">
                <table class="table table-striped dhis2-table-hover table-bordered">
                    <tr>
                        <th>
                            {{'linked_events' | translate}}
                        </th>
                        <th>
                            {{'org_unit' | translate}}
                        </th>
                        <th>
                            {{'program' | translate}}
                        </th>
                        <th>
                            {{'report_date' | translate}}
                        </th>
                        <th>
                            {{'status' | translate}}
                        </th>
                        <th ng-if="!selectedTei.inactive && selectedProgram.access.data.write"></th>
                    </tr>
                    <tr ng-repeat="rel in relatedEvents">
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showEventInCaptureApp(rel.eventId)">{{rel.relName}}</td>
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showEventInCaptureApp(rel.eventId)">
                            {{rel.orgUnit}}
                        </td>
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showEventInCaptureApp(rel.eventId)">
                            {{rel.program}}
                        </td>
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showEventInCaptureApp(rel.eventId)">
                            {{rel.eventDate}}
                        </td>
                        <td ng-attr-title="{{'go_to_dashboard'| translate}}" ng-click="showEventInCaptureApp(rel.eventId)">
                            {{rel.status}}
                        </td>
                        <td ng-click="removeRelationship(rel)" ng-attr-title="{{'delete_relationship'| translate}}" ng-if="rel.isDeleteable">
                            <i class="fa fa-trash-o red"></i>
                        </td>
                        <td ng-if="!rel.isDeleteable" ng-attr-title="{{'can_not_delete_relationship'| translate}}">
                            <i class="fa fa-trash-o grey"></i>
                        </td>
                    </tr>
                </table>           
            </div>
        </div>
    </div>
</div>